<template>
  <Transition name="fade">
    <div
      class="message-item"
      :style="{ '--level': message.level }"
      @click.stop="handleClick"
      :class="{
        'message-item--system': message.role == 'system',
        'message-item--user': message.role == 'user',
      }"
    >
      <template v-if="message.role == 'system'">
        <template v-if="type == 'on_llm_start'">
          <card title="大模型" icon="llm" icon-background="#1677FF" :message="message" />
        </template>
        <card
          v-else-if="type == 'on_chain_start'"
          title="chain"
          :icon="ioncs[type]"
          icon-background="#3DBCF3"
          :message="message"
        />
        <template v-else-if="type == 'on_text'">
          <div class="text">文本 {{ message.content }}</div>
        </template>
        <template v-if="message.childrens?.length && message.expand">
          <transition-group name="list" tag="div" class="children">
            <MessageItem :message="item" :type="item.type" v-for="item in message.childrens" :key="item" />
          </transition-group>
        </template>
      </template>
      <template v-else>
        <div class="text">{{ message.content }}</div>
      </template>
    </div>
  </Transition>
</template>

<script setup>
import { state } from '../chat.js'

const { messageId } = state
import Card from './Card.vue'

const ioncs = {
  on_llm_start: 'llm',
  on_llm_end: 'llm',
  on_chain_start: 'link',
  on_chain_end: 'link',

  on_tool_start: 'tool',
  on_tool_end: 'tool',
}

const props = defineProps({
  type: String,
  message: Object,
})

const data = computed(() => {
  const type = {}

  return {
    type,
  }
})

const handleClick = () => {
  const { data, role, run_id } = props.message

  if (role == 'system') state.messageId = run_id
}
</script>
<style lang="scss" scoped>
.message-item {
  // background-color: #fcfdfd;
  // border: 1px solid #f3f4f6;
  margin-top: 12px;
  // padding: 8px;
  line-height: 1.3;
  white-space: pre;
  padding-left: calc(var(--level) * 2em);
}

.message-item--user {
  display: flex;
  justify-content: flex-end;
}

.text {
  padding: 12px 16px;
  background-color: #f3f3f3;
  border-radius: 6px;
  white-space: pre-wrap;
}

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
